import React, { PropTypes, PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { message, Row, Col } from 'antd';
import { FirstHeaderC, DATA_ENTRY, TableC, SecondHeaderC, AdvancedSearch } from '../../../../../comps';
import colorArr from '../../../../../css/colors.js';
import styles from './index.less';

@Form.create()
class BasicGrade extends PureComponent {
  state = {
    bondID: '',
    //外部主体
    dataSource1: [],
    columns1: [],
    //外部债项
    dataSource2: [],
    columns2: [],
    //内部主体
    dataSource3: [],
    columns3: [],
    //内部债项
    dataSource4: [],
    columns4: [],
    //CAMS主体
    dataSource5: [],
    columns5: [],
    //CAMS债项
    dataSource6: [],
    columns6: [],
  };

  componentDidMount() {
    //调用搜索栏下拉枚举接口
    this.getSelectData();
    //查询下方表格数据
    this.getTableData();
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    //判断是否是最新的bondID
    if (nextProps.bondID != this.state.bondID) {
      this.setState(
        {
          bondID: nextProps.bondID,
        },
        () => {
          this.agency.props.form.resetFields();
          this.range.props.form.resetFields();
          this.getTableData();
        },
      );
    }
  }

  //获取搜索栏下拉枚举
  getSelectData = () => {
    const { dispatch, basicEventM } = this.props;
    const {
      globalM: {
        dataDictionary: { MAAT_BONDINFO_RATINGAGENCY = [], MAAT_BONDINFO_COMTYPE = [] },
      },
    } = this.props;
    //查询数据字典获取枚举
    dispatch({
      type: 'basicEventM/save',
      payload: {
        selectData1: MAAT_BONDINFO_COMTYPE,
        selectData2: MAAT_BONDINFO_RATINGAGENCY,
      },
    });
  };

  //选择框组件需要的数据格式
  changeSelect = (e) => {
    let arr = [];
    if (e && e.length) {
      e.map((item) => {
        arr.push({
          title: item.value,
          value: item.code,
        });
      });
    }
    return arr;
  };

  //点击查询调用方法
  getNewData = (e) => {
    if (e && e.agency && e.nature && e.range) {
      this.getTableData(e);
    } else {
      message.warning('请填写完整的查询条件');
    }
  };

  //获取评级表格信息
  getTableData = (e) => {
    const { isZiGuan } = this.props;
    this.setState({
      dataSource1: undefined,
      columns1: undefined,
      dataSource2: undefined,
      columns2: undefined,
    });
    const { dispatch } = this.props;
    const datas = {};
    datas.currentPage = 1;
    datas.numInPage = 500;
    datas.bondID = this.props.bondID;
    datas.agency = e ? e.agency : ['0', '1', '2'];
    datas.nature = e ? e.nature : ['0', '1'];
    datas.range = e ? (e.range == '0' ? true : false) : true;

    //获取外部-主体-数据
    dispatch({
      type: 'basicEventM/findTableData1',
      payload: datas,
      callback: (res) => {
        this.setState({
          dataSource1: res.data.dataSource,
          columns1: res.data.columns,
        });
      },
    });

    //获取外部-债项-数据
    dispatch({
      type: 'basicEventM/findTableData2',
      payload: datas,
      callback: (res) => {
        this.setState({
          dataSource2: res.data.dataSource,
          columns2: res.data.columns,
        });
      },
    });

    //资管进入显示内部、CAMS评级
    if (isZiGuan) {
      this.setState({
        dataSource3: undefined,
        columns3: undefined,
        dataSource4: undefined,
        columns4: undefined,
        dataSource5: undefined,
        columns5: undefined,
        dataSource6: undefined,
        columns6: undefined,
      });
      const dataObj = sessionStorage.getItem('bondInfo') ? JSON.parse(sessionStorage.getItem('bondInfo')) : '';
      const datazg = {};
      datazg.currentPage = 1;
      datazg.numInPage = 500;
      //CAMS/内部评级-接口查询参数
      datazg.tradingCode = dataObj.tradingCode;
      datazg.exchangeCode = dataObj.exchangeCode;
      //获取内部-主体-数据
      dispatch({
        type: 'basicEventM/findInMainData',
        payload: datazg,
        callback: (res) => {
          this.setState({
            dataSource3: res.data.dataSource,
            columns3: res.data.columns,
          });
        },
      });
      //获取内部-债项-数据
      dispatch({
        type: 'basicEventM/findInBondData',
        payload: datazg,
        callback: (res) => {
          this.setState({
            dataSource4: res.data.dataSource,
            columns4: res.data.columns,
          });
        },
      });
      //获取CAMS-主体-数据
      dispatch({
        type: 'basicEventM/findCamsMainData',
        payload: datazg,
        callback: (res) => {
          this.setState({
            dataSource5: res.data.dataSource,
            columns5: res.data.columns,
          });
        },
      });
      //获取CAMS-债项-数据
      dispatch({
        type: 'basicEventM/findCamsBondData',
        payload: datazg,
        callback: (res) => {
          this.setState({
            dataSource6: res.data.dataSource,
            columns6: res.data.columns,
          });
        },
      });
    }
  };

  //外部-主体-表格属性
  setColumns1 = (columns) => {
    let arr = columns;
    if (arr && arr.length) {
      arr.map((item) => {
        if (item.title == '变动方向') {
          item.render = (text, record) => {
            return this.changeColor(text);
          };
        }
        if (item.title == '评级' || item.title == '变动方向' || item.title == '展望') {
          item.width = '16%';
        }
        if (item.title == '评级机构' || item.title == '日期') {
          item.width = '21%';
        }
      });
    }
    return arr;
  };

  //外部-债项-表格属性
  setColumns2 = (columns) => {
    let arr = columns;
    if (arr && arr.length) {
      arr.map((item) => {
        if (item.title == '变动方向') {
          item.render = (text, record) => {
            return this.changeColor(text);
          };
        }
        if (item.title == '评级' || item.title == '评级机构' || item.title == '日期') {
          item.width = '25%';
        }
      });
    }
    return arr;
  };

  // 内部-表格属性
  setColumns3 = (columns) => {
    let arr = columns;
    if (arr && arr.length) {
      arr.map((item) => {
        if (item.key == 'ratingConclusion') {
          item.width = '16%';
        } else {
          item.width = '12%';
        }
      });
    }
    return arr;
  };

  // CAMS-主体-表格属性
  setColumns4 = (columns) => {
    let arr = columns;
    if (arr && arr.length) {
      arr.map((item) => {
        item.width = '20%';
      });
    }
    return arr;
  };
  // CAMS-债项-表格属性
  setColumns5 = (columns) => {
    let arr = columns;
    if (arr && arr.length) {
      arr.map((item) => {
        item.width = '50%';
      });
    }
    return arr;
  };
  //外部-债项-变动方向变色
  changeColor = (text) => {
    const textColor = colorArr.debtAndProfit.text;
    let color = colorArr.debtAndProfit.text[3];
    if (text == '首次') {
      color = `${textColor[2]}`;
    } else if (text == '调高') {
      color = `${textColor[0]}`;
    } else if (text == '调低') {
      color = `${textColor[1]}`;
    }

    return <span style={{ color: `${color}` }}>{text}</span>;
  };

  //债券评级查询条件模块
  searchPart = () => {
    const { basicEventM } = this.props; //下拉枚举
    const { selectData1, selectData2 } = basicEventM;
    const selectEg = this.changeSelect(selectData2);
    const selectNa = this.changeSelect(selectData1);
    const selectThree = [
      { title: '仅显示评级变动', value: '0' },
      { title: '显示全部', value: '1' },
    ];
    const searchProps = {
      dataSource: [
        {
          dataIndex: 'agency',
          title: '评级机构',
          type: DATA_ENTRY.SELECT,
          dataSource: selectEg,
          initialValue: ['0', '1', '2'],
          isMultiple: true,
          allowClear: true,
          onRef: (ref) => {
            this.agency = ref;
          },
        },
        {
          dataIndex: 'nature',
          title: '主体性质',
          type: DATA_ENTRY.SELECT,
          dataSource: selectNa,
          initialValue: ['0'],
          isMultiple: true,
          allowClear: true,
        },
        {
          dataIndex: 'range',
          title: '展示范围',
          type: DATA_ENTRY.SELECT,
          dataSource: selectThree,
          initialValue: selectThree[0].value,
          allowClear: true,
          onRef: (ref) => {
            this.range = ref;
          },
        },
      ],
      onQuery: (e) => this.getNewData(e),
    };
    return (
      <div style={{ marginBottom: '12px' }}>
        <AdvancedSearch {...searchProps} allowClear={false} />
      </div>
    );
  };

  //table双列组件模块
  tablePart = (dataSource1, columns1, dataSource2, columns2) => {
    return (
      <>
        <Row>
          <Col span={12} style={{ paddingRight: '10px' }}>
            <div className='second-title'>
              <SecondHeaderC title='主体评级' />
            </div>
            <TableC dataSource={dataSource1} columns={columns1} hidePage={true} scroll={{ y: 170 }} />
          </Col>
          <Col span={12} style={{ paddingLeft: '10px' }}>
            <div className='second-title'>
              <SecondHeaderC title='债项评级' />
            </div>
            <TableC dataSource={dataSource2} columns={columns2} hidePage={true} scroll={{ y: 170 }} />
          </Col>
        </Row>
      </>
    );
  };

  render() {
    const { dataSource1, columns1, dataSource2, columns2, dataSource3, columns3, dataSource4, columns4, dataSource5, columns5, dataSource6, columns6 } = this.state;
    const { isZiGuan } = this.props;
    const newColumns1 = this.setColumns1(columns1);
    const newColumns2 = this.setColumns2(columns2);
    const newColumns3 = this.setColumns3(columns3);
    const newColumns4 = this.setColumns3(columns4);
    const newColumns5 = this.setColumns4(columns5);
    const newColumns6 = this.setColumns5(columns6);
    return (
      <div className={styles.basicGradeBox}>
        {this.searchPart()}
        <FirstHeaderC title='外部评级' />
        {this.tablePart(dataSource1, newColumns1, dataSource2, newColumns2)}
        {isZiGuan ? (
          <>
            <div>
              <div className='first-title'>
                <FirstHeaderC title='内部评级' />
              </div>
              <div className='second-title'>
                <SecondHeaderC title='主体评级' />
              </div>
              <TableC dataSource={dataSource3} columns={newColumns3} hidePage={true} scroll={{ y: 170 }} />
              <div className='second-title-item'>
                <SecondHeaderC title='债项评级' />
              </div>
              <TableC dataSource={dataSource4} columns={newColumns4} hidePage={true} scroll={{ y: 170 }} />
            </div>
            <div className='first-title'>
              <FirstHeaderC title='CAMS评级' />
            </div>
            {this.tablePart(dataSource5, newColumns5, dataSource6, newColumns6)}
          </>
        ) : null}
      </div>
    );
  }
}
export default connect(({ basicEventM, dashboard, globalM }) => ({ basicEventM, dashboard, globalM }))(BasicGrade);
